<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>note-code</title>
	<style>
		.container {
			width: 300px;
			height: 300px;
			background-color: skyblue;
			display: grid;
			/* 单元格 */
			grid-template-rows: repeat(3, 100px);
			grid-template-columns: repeat(3, 100px);
			/* 适用于 子项（w 50px h 50px） < 单元格（3行3列 100px x 100px） */
			/* justify-items: center;
			align-items: end; */

			/* 复合写法：前者是垂直方向，后者是水平方向（注意顺序） */
			place-items: center end;
		}

		.container div {
			/* 子项 */
			width: 50px;
			height: 50px;
			background-color: sienna;
		}
	</style>
</head>

<body>
	<div class="container">
		<div>01</div>
		<div>02</div>
		<div>03</div>
		<div>04</div>
		<div>05</div>
		<div>06</div>
		<div>07</div>
		<div>08</div>
		<div>09</div>
	</div>
</body>

</html>